<!--

  内容区销售系统
  
-->

<template>
    <div class="contain">
        <el-row >
  
                   <el-button type="primary"
                    plain class="aa"
                    
                     >样品赠送</el-button>
                   <el-button type="success" plain>政策支持</el-button>
                   <el-button type="info" plain>销售发票</el-button>
                   <el-button type="warning" plain>销售合同</el-button>
                   <el-button type="danger" plain>客户通知</el-button>
                   <el-button type="danger" plain>费用报销</el-button>
</el-row>
<div class="tu">
            <img   class="t1" src="../../assets/green/four-gray.png" />
            <img class="t2" src="../../assets/green/14.png" />
            <img class="t3" src="../../assets/green/four-black.png" />
            <img class="t2 t22" src="../../assets/green/14.png" />
            <img class="t4" src="../../assets/green/11.png" />
            <img class="t5 " src="../../assets/green/four-black.png" />
            <img class="t6" src="../../assets/green/four-gray.png" />
              <img class="t7" src="../../assets/green/10.png" />
            <img class="t8" src="../../assets/green/9.png" />
             <img class="t5 t55" src="../../assets/green/four-green.png" />


           <Fontsize title="报价单" distance="17%" km="44%"/>
    <Fontsize title="客户订单" distance="37.8%" km="44%"/>
    <Fontsize title="销售单" distance="61.5%" km="22.5%"/>
    <Fontsize title="退货单" distance="61.5%" km="67%"/>
    <Fontsize title="应收账款" distance="84%" km="44%"/>
    </div>
    <div class="biaoti-1">
            <p>Dummy&nbsp;Title</p>
            <span>Aenean&nbsp;commodo&nbsp;&nbsp;Liguleget<br>
                dolor.Aenean&nbsp;massa&nbsp;.&nbsp;Cum<br>
                sicuusnatoque&nbsp;penatibus&nbsp;et<br>
            </span>
       </div>
       <div class="biaoti-2">
            <p>Dummy&nbsp;Title</p>
            <span>Aenean&nbsp;commodo&nbsp;&nbsp;Liguleget <br>
                dolor.Aenean&nbsp;massa&nbsp;.&nbsp;Cum <br>
                sicuusnatoque&nbsp;penatibus&nbsp;et <br>
            </span>
       </div>
       <div class="biaoti-3">
            <p>Dummy&nbsp;Title</p>
            <span>Aenean&nbsp;commodo&nbsp;&nbsp;Liguleget<br>
                dolor.Aenean&nbsp;massa&nbsp;.&nbsp;Cum<br>
                sicuusnatoque&nbsp;penatibus&nbsp;et<br>
            </span>
       </div>
    </div>
</template>

<script>
import Fontsize from '../Fontsize'
export default {
  components:{
        
        Fontsize 
    }
}
</script>

<style lang="scss" scoped>
    .contain{
        height: 100%;
    }
     .aa{
        margin-left:60px
    }
  .el-button{
       margin-top: 20px;
    color: #b0b0b0;
    background: #5a5a5a;
    border-color: #5a5a5a;
        transition: 1.1s;
   }
   
   .tu{
    position: relative;
    height: 88%;
    width: 68%;
    }
    .t1{
   position: absolute;
    top: 37%;
    left: 14%;
    height: 25.216%;
    width: 14.891%;
    cursor: pointer;
    }
    .t2{
   position: absolute;
    top: 47.5%;
    left: 30%;
    height: 1%;
    width: 3.18%;
    }
     .t3{
    position: absolute;
    top: 37%;
    left: 34.5%;
    height: 25.56%;
    width: 14.955%;
    cursor: pointer;
    }
    .t22{
       left: 50.5%;
    }
    .t4{
        position: absolute;
    top: 26%;
    left: 53.5%;
    height: 45.68%;
    width: 3.91%;
    }
    .t5{
        position: absolute;
    top: 15.5%;
    left: 58.5%;
    height: 25.56%;
    width: 14.955%;
    cursor: pointer;
    }
    .t6{
    position: absolute;
    top: 59.5%;
    left: 58.5%;
    height: 25.56%;
    width: 14.955%;
    cursor: pointer;
    }
    .t7{
     position: absolute;
        top: 25.5%;
    left: 73.5%;
    height: 23.48%;
    width: 6.72%;
    }
    .t8{
    position: absolute;
    top: 48.5%;
    left: 73.5%;
    height: 23.48%;
    width: 6.72%;
    }
    .t55{
     left: 80.65%;
    top: 37%;
    }

.biaoti-1{
    position: absolute;
   bottom:33%;
    left: 23%;
   line-height:30px;
   color: #7f7a80;
   height: 14%;
    width: 10%;
    overflow: hidden;
   p{
       margin-left: 20%;
       font-size: 18px;
   }
   span{
       color: #acadaf;
        font-size: 12px;
   }
}
.biaoti-2{
    position: absolute;
   bottom:33%;
    left: 35%;
   line-height:30px;
   color: #7f7a80;
   height: 14%;
    width: 10%;
    overflow: hidden;
   p{
       margin-left: 20%;
       font-size: 18px;
   }
   span{
       color: #acadaf;
        font-size: 12px;
   }
}
.biaoti-3{
    position: absolute;
   bottom:33%;
    left:61%;
   line-height:30px;
   color: #7f7a80;
   height: 14%;
    width: 10%;
    overflow: hidden;
   p{
      margin-left: 20%;
       font-size: 18px;
   }
   span{
       color: #acadaf;
        font-size: 12px;
   }
}


    @media screen and (max-width:1462px){
p{  font-size: 14px !important;};

}
</style>